<template>
  <view class="container">
    <div class="content">
      <uv-sticky>
        <view class="search-box">
          <uv-search @change="changeFn" placeholder="请输入标题" :show-action="false" :border="false" bgColor="#FFFFFF" borderColor="#d8d8d8"
                     v-model="queryParams.title" shape="square" :clearabled="true" @clear="clear"></uv-search>
        </view>
      </uv-sticky>
      <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
        <view class="list-item" v-for="(item, index) in dataList" :key="index" @click="goToDetail(item)">
          <view class="flex-box">

            <view class="">
              <uv-text :text="item.title"></uv-text>
            </view>

            <view class="">
              <uv-badge :isDot="item.isRead !== 1"></uv-badge>
            </view>
          </view>

          <view class="flex">
            <uv-text :lines="2" type="info" :text="item.content"></uv-text>
          </view>

          <view class="flex">
            <view class="">
              <uv-text type="info" :text="`发布人：`+item.userName"></uv-text>
            </view>
            <view class="text-gray">{{ item.createTime }}</view>
          </view>
        </view>
      </mescroll-body>

      <uni-fab ref="fab" horizontal="right" @fabClick="fabClick" v-if="authority.includes('admin')"/>
    </div>
  </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import NoticeAPI from '@/api/notice'

export default {
  mixins: [MescrollMixin], // 使用mixin
  data() {
    return {
      userInfo: {},
      authority: 'employee',
      queryParams: {
        current: 1,
        size: 10
      },
      dataList: [],
      loading: true,
    };
  },
  onLoad() {
    this.userInfo = uni.getStorageSync('authInfo')
    this.authority = this.userInfo.authority

  },
  onShow() {
    //(内部会自动page.num=1,再主动触发up.callback)
    this.mescroll.resetUpScroll();
  },
  methods: {
    fabClick() {
      uni.navigateTo({
        url: `/pages/msg/add`
      });
    },
    /*上拉加载的回调*/
    upCallback(page) {
      let me = this
      me.queryParams.current = page.num; // 页码, 默认从1开始
      NoticeAPI.noticeList(me.queryParams).then(res => {
        let curPageData = res.data.records
        // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
        let curPageLen = curPageData.length;
        // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
        let totalPage = res.data.totalPage
        me.total = res.data.total
        //设置列表数据
        if (page.num === 1) this.dataList = []; //如果是第一页需手动置空列表
        this.dataList = this.dataList.concat(curPageData); //追加新数据

        // 请求成功,隐藏加载状态
        //方法一(推荐): 后台接口有返回列表的总页数 totalPage
        this.mescroll.endByPage(curPageLen, totalPage);
      })
    },
    changeFn() {
      let me = this;
      me.queryParams.current = 1
      me.dataList = []
      //(内部会自动page.num=1,再主动触发up.callback)
      this.mescroll.resetUpScroll();
    },
    clear() {
      this.queryParams = {
        current: 1,
        size: 10
      }
      this.dataList = []
      //(内部会自动page.num=1,再主动触发up.callback)
      this.mescroll.resetUpScroll();
    },
    goToDetail(item) {
      uni.navigateTo({
        url: `/pages/msg/detail?id=${item.id}`
      });
    }
  }
}
</script>


<style scoped>
.content {
  margin: auto 0.3rem;
}

.list-item {
  width: 90%;
  margin: 0.3rem auto;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.flex-box {
  display: flex;
  justify-content: space-between;
}

.wid {
  width: 80%;
}

.flex {
  display: flex;
  justify-content: space-between;
  line-height: 1.4rem;
}

.text-gray {
  font-size: 14px;
  color: gray;
  margin: 0.2rem 0;
  width: 50%;
}
</style>